<template>
  <el-container>
    <el-header height="40px" style="background-color: #00838f;position: relative">
      <h3 style="color: #fff;line-height: 40px;font-family: 'Microsoft YaHei',serif;width: 50%">组合添加</h3>
      <el-button type="text" icon="el-icon-plus" class="addBTN" @click="dialogFormVisible = true"></el-button>
    </el-header>
    <el-main style="background-color: #fff;">
      <el-container>
        <el-header>
          <el-input placeholder="请输入内容" v-model="search.value" class="input-with-select" span="12" clearable @clear="refreshData">
            <el-select v-model="search.method" slot="prepend" placeholder="请选择" :value="search.method">
              <el-option label="ID" value="ID"></el-option>
              <el-option label="商品" value="商品"></el-option>
              <el-option label="价格" value="价格"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="dataFilter"></el-button>
          </el-input>
        </el-header>
        <el-main>
          <!--列表-->
          <el-table ref="multipleTable" :data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%" highlight-current-row
            @selection-change="handleSelectionChange">
            <!--列表-->
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="id" align="center"><template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.package_item_id }}</span>
            </template>
            </el-table-column>
            <el-table-column label="图片" align="center"><template slot-scope="scope">
              <span style="margin-left: 10px"><img :src="'http://localhost:8989'+scope.row.SPU_head_img_path"></span>
            </template>
            </el-table-column>
            <el-table-column label="商品" align="center"><template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.sub_type_name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="简介" align="center"><template slot-scope="scope">
                <span>{{scope.row.SPU_describe}}</span>
              </template>
            </el-table-column>
            <el-table-column label="价格" align="center"><template slot-scope="scope">
                <span>{{scope.row.sell_price}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="224px" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="success" @click="handleCheck(scope.$index, scope.row)" >查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
        <el-footer>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="list.length"
            class="myRight">
          </el-pagination>
        </el-footer>
      </el-container>
    </el-main>
    <!--查看弹框-->
    <el-dialog title="查看详情" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="name" label="类名" ></el-table-column>
        <el-table-column property="data" label="值"></el-table-column>
      </el-table>
    </el-dialog>

    <!--添加-->
    <!--//添加-->
    <el-dialog title="添加组合" :visible.sync="dialogFormVisible"   class="data_box">
      <el-form :model="mylist" v-on:submit="addCustomer" style="width: 450px">
        <el-form-item label="组合id" :label-width="formLabel_Width" class="input_data">
          <el-input v-model="mylist.package_id" autocomplete="off" style="width: 250px"></el-input>
        </el-form-item>
        <!---->
        <el-form-item label="组合商品名一" :label-width="formLabel_Width" class="inputname">
          <el-select  v-model="mylist.SKU_name" placeholder="请选择添加的商品" style="width: 250px">
            <el-option v-for="iltm in list"  :value="iltm.SKU_name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组合商品名二" :label-width="formLabel_Width" class="inputname">
          <el-select   :model="mylistn" v-model="mylistn.SKU_name" placeholder="请选择添加的商品" style="width: 250px">
            <el-option v-for="iltm in mylistname"  :value="iltm.SKU_name"></el-option>
          </el-select>
        </el-form-item>
        <!---->
        <el-form-item label="商品id" :label-width="formLabel_Width" class="input_data">
          <el-input v-model="mylist.package_item_id" autocomplete="off" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="组合名字" :label-width="formLabel_Width"  class="input_data">
          <el-input v-model="mylist.package_name" autocomplete="off" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="组合价格" :label-width="formLabel_Width"  class="input_data">
          <el-input-number v-model="mylist.package_price" autocomplete="off" :precision="2" :step="0.1" :max="99999"></el-input-number>
        </el-form-item>
        <!--//其他-->
        <el-form-item label="创建时间" :label-width="formLabel_Width"  class="input_data" >
          <el-input v-model="mylist.create_date" autocomplete="off" type="date" style="width: 250px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <router-link to="/packageManage">
        <el-button type="submit"  @click="addCustomer" >确 定</el-button>
        </router-link>
      </div>
    </el-dialog>

  </el-container>

</template>

<script>
  export default {
    name: 'subType',
    components: {
    },
    // 表格数据的操作方法
    data () {
      return {
        mylistname:[],
        mylistn:{
          SKU_name:"",
        },
        mylist: {
          SKU_name:"",
          package_id:"",
          package_price:"",
          package_name: '',
          create_date:'',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        gridData:[

        ],
        dialogTableVisible: false,
        dialogFormVisible: false,
        // mainTypeList: [],
        currentPage: 1,
        currentSpuPage: 1,
        pageSize: 5,
        list: [],
        chosenList: [],
        subTypeEditDialogVisible: false,
        spuDialogVisible: false,
        subTypeAddDialogVisible: false,
        formLabel_Width: '110px',
        formLabelWidth: '100px',
        editForm: {
          sub_type_name: null,
          package_item_id: null,
          mainTypeCode: null
        },
        addForm: {
          sub_type_name: null,
          mainTypeCode: null,
          subTypeState: '启用'
        },
        spuList: [],
        search: {
          method: 'ID',
          value: null
        }
      }
    },

    methods: {

      //添加

      addCustomer(e){
        let that=this;
        console.log("123");
        if (!this.mylist.package_name||!this.mylist.package_price||!this.mylist.create_date){
          console.log("请添加")
        }else{
          let newlist ={
            package_id:this.mylist.package_id,
            package_item_id:this.mylist.package_item_id,
            package_name:this.mylist.package_name,
            create_date:this.mylist.create_date,
            package_price:this.mylist.package_price
          };
          this.$axiosx.post('/api/back_i.ing',newlist)
            .then(function (res) {
              console.log(res.data.SKU_name);
              that.mylistname=res.data.SKU_name
              console.log(res.data);
              that.$router.push({"path":"/packageManage"})

            }).catch(function (err) {
            console.log(err)
          })
          this.dialogFormVisible = false

        }
        e.preventDefault()
      },
      // 分页控制开始
      handleSizeChange (val) {
        this.pageSize = val
      },
      handleCurrentChange (val) {
        this.currentPage = val
      },
      handleSpuCurrentChange (val) {
        this.currentSpuPage = val
      },
      // 分页控制结束
      //  多选行
      handleSelectionChange (val) {
        this.chosenList = []
        val.forEach((val, index, arr) => {
          this.chosenList.push(val.package_item_id)
        })
      },
      editFormSubmit () {
        this.$axiosx.post('/api/backEditSubType', this.editForm)
          .then((response) => {
            this.$message({
              type: response.data,
              message: '操作成功'
            })
            this.subTypeEditDialogVisible = false
            this.refreshData()
          })
          .catch((error) => {
            this.$message({
              type: 'error',
              message: '操作失败，请重试！'
            })
            this.subTypeEditDialogVisible = false
            this.refreshData()
            console.log(error)
          })
      },
      addFormSubmit () {
        this.$axiosx.post('/api/backAddSubType', this.addForm)
          .then((response) => {
            this.$message({
              type: response.data,
              message: '添加成功'
            })
          })
          .catch(error => console.log(error))
        this.subTypeAddDialogVisible = false
      },

      handleCheck (index, row) {
        this.dialogTableVisible=true;
        console.log(row.package_item_id);
        let i= row.package_item_id;
        const that = this;
        this.$axiosx.get(`/api/back_product.ing?package_item_id=${row.package_item_id}`)
          .then(function (response) {
          console.log(response.data);
          let arr=response.data[i-1];
          console.log(arr);
          that.gridData = [
            {name:'商品ID',data:arr.package_item_id},
            {name:'SKU编码',data:arr.SKU_code},
            {name:'SKU名称',data:arr.SKU_name},
            {name:'参数名称',data:arr.parameter_name_color},
            {name:'售价',data:arr.sell_price},
            {name:'进价',data:arr.purchase_price},
            {name:'SPU简介',data:arr.SPU_describe},
          ]
        }).catch(function (err) {
          console.log(err)
        })
      },
      dataFilter () {
        switch (this.search.method) {
          case 'ID':
            this.list.forEach((val, index, arr) => {
              if (val.package_item_id === parseFloat(this.search.value)) {
                this.list = [val]
              }
            })
            break
          case '商品':
            let showData = []
            this.list.forEach((val, index, arr) => {
              if (val.sub_type_name.indexOf(this.search.value) >= 0) {
                showData.push(val)
              }
            })
            this.list = showData
            break
          case '价格':
            let showData2 = []
            this.list.forEach((val, index, arr) => {
              if (val.sell_price.indexOf(this.search.value) >= 0) {
                showData2.push(val)
              }
            })
            this.list = showData2
            break
        }
      },
      filterTag (value, row) {
        return row.state === value
      },
      refreshData () {
        this.$axiosx.get('/api/back_product.ing')
          .then((response) => {
            this.list = response.data
          })
          .catch((error) => {
            console.log(error.message)
          })
      },

    },
    created() {
      this.refreshData ()
      console.log(this);
      const that = this;
      this.$axiosx.get('/api/back_product.ing').then(function (response) {
        console.log(response.data);
        that.list = response.data;
        that.mylistname=response.data;
        for(let i=0;i<that.list.length;i++){
          that.list[i].SPU_head_img_path=that.list[i].SPU_head_img_path.substr(1);
        }
        console.log(that.list[0].SPU_head_img_path);


      }).catch(function (err) {
        console.log(err)
      })
    }
  }
</script>

<style scoped lang="less">
  .el-select{
    width: 110px;
  }
  .input-with-select.el-input.el-input-group.el-input-group--append.el-input-group--prepend {
    width: 350px;
  }
  img{
    width: 80px;
  }
 .inputname{
   width: 150px;
 }
  .el-input__inner{
    width: 200px;
  }
</style>
